<template>
    <div class="bottom-bar">
      <div class="check-content">
      <check-button
        :is-checked="isSelectAll"
        class="check-button"
        @click.native="checkClick"/>
      <span>全选</span>
      </div>
      <div class="price">
        合计{{ totalPrice }}
      </div>
      <div class="calculate">
        总数量：{{checkLength}}
      </div>
    </div>
</template>

<script>
  import CheckButton from 'content/checkButton/CheckButton'
  import { mapGetters } from 'vuex'
    export default {
        name: "CartBottomBar",
      components:{
        CheckButton
      },
      computed:{
          ...mapGetters(['cartList']),
        totalPrice(){
          return '￥'+ this.cartList.filter(item=>{
            return item.checked //如果checked为true则返回
          }).reduce((preValue,item)=>{
            return preValue + item.price*item.count
          },0).toFixed(2)
        },
        checkLength(){
          //return this.$store.state.cartList.filter(item=>item.checked).length  //也可以写成return形式
          return this.cartList.filter(item=>item.checked).length
        },
        isSelectAll(){
         // return !(this.cartList.filter(item=>!item.checked).length)
          if(this.cartList.length === 0) return false //如果没有这一步表明一开始没有数据的时候，还有undefined
         // return !this.cartList.find(item=>!item.checked)  //性能更好
          //3.普通遍历
          for(let item of this.cartList){
            if(!item.checked){
              return false
            }
          }
          return true
        }
      },
      methods:{
        checkClick(){
          if(this.isSelectAll){ //全部选中的情况下遍历所有cartList的item变为false
            this.cartList.forEach(item => item.checked = false)
          }else { //有部分被选中或全部不选中
            this.cartList.forEach(item => item.checked = true)
          }
        }
      }
    }
</script>

<style scoped>
  .bottom-bar{
    position: relative;
    display: flex;
    height: 40px;
    background-color:#eee;
    line-height: 40px;

  }
  .check-content{align-items: center;width: 80px;display: flex;
   }
  .check-button{width: 22px;height: 22px;line-height: 22px;margin-right: 5px;}
  .check-button img{align-items: center;}
  .price{margin-left: 30px;flex: 1}
  .calculate{width: 90px;
    background-color: red;color: #fff;text-align: center}
</style>
